<template>
  <div class="auto-call-name">
    <div class="left">
      <!-- v-if="defaultExpandedKeys.length > 0 && defaultCheckedKeys.length > 0" -->
      <CustomTree
        v-if="defaultCheckedKeys.length > 0"
        ref="jshTreeRef"
        showCheckbox
        title="请选择监室"
        width="500rem"
        api="/znjszd3/comm/getJshsByDwdm"
        :params="{ type: 'tree' }"
        v-model:defaultExpandedKeys="defaultExpandedKeys"
        v-model:defaultCheckedKeys="defaultCheckedKeys"
      ></CustomTree>
    </div>

    <div class="right" v-loading="loading">
      <el-switch v-model="isOpen" size="large" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-value="Y" inactive-value="N" active-text="启用" inactive-text="停用" />
      <el-button type="primary" plain @click="add" :disabled="isOpen != 'Y'"> 增加点名时间 </el-button>
      <el-scrollbar>
        <div class="set-time">
          <div class="box" v-for="(item, index) in times" :key="index">
            <div class="title">请选择开始点名时间{{ index + 1 }}</div>
            <el-time-picker v-model="times[index]" arrow-control placeholder="请选择" format="HH : mm" value-format="HH:mm" :disabled="isOpen != 'Y'" />
            <el-button v-if="times.length > 1" size="small" type="danger" plain @click="del(index)" :disabled="isOpen != 'Y'"> 删除 </el-button>
          </div>
        </div>
      </el-scrollbar>

      <el-button class="confirm" size="large" type="primary" @click="confirm">确 定</el-button>
    </div>
  </div>
</template>

<script setup name="autoCallName">
import { ref, onBeforeMount, onMounted, computed, watch, onBeforeUnmount, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { http, fillData } from '@/utils/index.js'
import { stores } from '@/stores/index.js'
import { useRouter } from 'vue-router'

const userStore = stores.useUserStore()
const router = useRouter()

const props = defineProps({})

const jshTreeRef = ref()
const loading = ref(false)

const value2 = ref('')
const isOpen = ref('Y')
const times = ref([])
const defaultExpandedKeys = ref([])
const defaultCheckedKeys = ref([])

onMounted(async () => {
  getData()
})
const getData = () => {
  loading.value = true

  http('/znjszd3/ht/jsdmjob/getJsdmJobByDwdm', 'get')
    .then((res) => {
      isOpen.value = res.data.sfqy
      if (res.data.dmsj) {
        times.value = res.data.dmsj.split(',')
        //取监室号前两位作为监区号
        let expandedKeys = res.data.jshs.split(',').map((item) => item.slice(0, 2))
        defaultExpandedKeys.value = Array.from(new Set(expandedKeys))
        defaultCheckedKeys.value = res.data.jshs.split(',')
      }
    })
    .finally(() => {
      loading.value = false
    })
}

const add = () => {
  times.value.push('')
}
const del = (index) => {
  times.value.splice(index, 1)
}
const confirm = () => {
  const checked = jshTreeRef.value.treeRef.getCheckedKeys()
  if (checked.length == 0) return ElMessage.warning('请选择监室')

  const dmsj = times.value.filter((item) => item)
  // if (dmsj.length == 0) return ElMessage.warning('请设置点名时间')
  http(
    '/znjszd3/ht/jsdmjob/updateJsdmJobByDwdm',
    'post',
    {
      jshs: checked.join(','),
      dmsj: dmsj.join(','),
      sfqy: isOpen.value
    },
    false
  ).then((res) => {
    if (res.status == 200) {
      ElMessage.success(res.message[0])
      getData()
      //  router.go(0)
    }
  })
}
</script>
<style lang="scss" scoped>
.auto-call-name {
  width: 100%;
  height: calc(100% - 15px);
  display: flex;
  // background-color: #fff;
  .left {
    width: 500rem;
    border-radius: 4px;
    overflow: hidden;
  }
  .right {
    position: relative;
    padding: 20px;
    margin-left: 10px;
    flex: 1;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
    .el-scrollbar {
      height: 790px;
      margin-top: 10px;
    }
    .set-time {
      min-height: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); /* 每行从左到右排列 */
      grid-auto-rows: 70px;
      grid-gap: 10px;
    }
    .box {
      // height: 100px;
      margin-bottom: 10px;
      .title {
        margin-bottom: 15px;
      }
      ::v-deep(.el-date-editor.el-input) {
        margin-right: 20px;
      }
    }

    .el-button.confirm {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 30px;
      font-size: 18px;
    }
  }
  .el-switch {
    margin-right: 50px;
    .el-switch--large {
      line-height: 28px;
    }
    .el-switch__label * {
      font-size: 18px;
    }
  }
}
</style>
